<template>
  <div class="box">
    <ul>
      <li><h1>Login</h1></li>
      <li><input type="text" v-model.trim="cookie" style="width: 100px" placeholder="user"></li><span>{{tip}}</span>
      <li :style="`visibility:${this.vis}`" v-if="cookie!==''?this.vis = 'hidden':this.vis = 'visible'"></li>
      <li><button @click="denglu(cookie)">登录</button></li>
    </ul>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import http from "@/util/http";
export default {
  name: 'login',
  data() {
    return {
      cookie: '',
      tip:'',
      vis:'hidden'
    }
  },
  methods: {
    denglu(cookie) {
      if(cookie === ''){
        alert("请输入任意用户名")
      }else{
        // this.vis = 'hidden'
        setTimeout(() => {
          Cookies.set(this.cookie,'inb')

          // localStorage.setItem('inb','后端返回的字段')
          //this.$router.back()   //返回之前的页面
          this.$router.push('/center')

          //记录路由原，转跳到进入之前的页面  局部路由拦截
          // this.$router.push(this.$route.query.aaa)
        },1000)
        http.post('/cookie',{
          user:this.cookie,
          pwd:123
        }).then(res =>{
          this.$store.commit("changeCookie",cookie)
          console.log('登录成功')
        })
      }

    },

  },
}
</script>

<style scoped>
.box{
  height: 100vh;
  display: flex;
  background-color: #39a9ed;
}
ul{
  margin: auto;

}
li{
  margin:10px auto;
  text-align: center;
}
</style>
